<template>
    <!--    编辑器-->

    <div id="editor"
        :style="{ height: props.height ? props.height : '400px', width: props.width ? props.width : '100%' }" />

</template>

<script setup lang="ts">
import Vditor from "vditor";
import 'vditor/dist/index.css';
import { onMounted, ref, watch } from "vue";
import { useTokenStore } from "../../stores/token";
import { ElMessage } from "element-plus";


const tokenStore = useTokenStore()
// 暗色模式主题
//const themeStore = useThemeStore();
const isDarkTheme = false
// 编辑器
const editor = ref()
// 文件上传 url 前缀
const baseURL = `http://localhost:8888`
const spinning = ref<boolean>(true)
// 定义prop传参
const props = defineProps<{
    modelValue?: string,
    height?: string,
    width?: string
}>()
// 定义抛出emits函数
const emits = defineEmits(['update:modelValue'])

// 初始化编辑器
onMounted(() => {
    editor.value = new Vditor('editor', {
        height: props.height ? props.height : '400px',                          // 高
        width: props.width ? props.width : '100%',                              // 宽
        mode: 'wysiwyg',                                                        // 默认模式：所见即所得
        theme: isDarkTheme ? 'dark' : 'classic',                                // 编辑器主题
        icon: 'ant',                                                            // 图标风格
        //cdn:'/vditor',                                                          // 自定义cdn地址，指向项目中public/vditor 下目录
        preview: {
            theme: { current: isDarkTheme ? 'dark' : 'light' },                     // 内容主题
            hljs: { style: isDarkTheme ? 'solarized-dark256' : 'solarized-light' }, // 代码块主题
        },
        fullscreen: {
            index: 1100                                                           // 全屏层级
        },
        toolbarConfig: {
            hide: false,                                                          // 隐藏工具栏
            pin: true                                                             // 固定工具栏
        },
        after() {                                                               // 编辑器初始化后的钩子函数
            spinning.value = false                                                // 关闭加载loading
            if (props.modelValue) {
                editor.value.setValue(props.modelValue)                             // v-model 赋值
            }
        },
        input(value) {                                                          // 输入后值后的钩子函数
            emits('update:modelValue', value)                               // 双向绑定编辑器内容
        },
        counter: {
            enable: true,                                                         // 启用计数器
            type: 'markdown'                                                      // 计数器类型
        },
        outline: {                                                              // 大纲配置
            enable: false,                                                        // 关闭大纲
            position: 'left'                                                      // 大纲位置
        },
        cache: {                                                                 // 缓存配置
            enable: false                                                          // 关闭缓存
        },
        upload: {
            url: baseURL + '/minio/upload',                         // 文件上传接口
            headers: { 'Authorization': tokenStore.token },             // 请求头获取token
            fieldName: 'file',    // 文件上传接口参数名
            // 数据转换                                     
            format(file, responseText: any) {
                // responseText需要转换为json对象
                const res=JSON.parse(responseText)
                let url = res.data;
                const name = file[0].name;
                if (url) {
                    // 去掉 URL 中的查询参数部分
                    url = url.split('?')[0];
                } else {
                    // 如果没有返回有效的 URL，可以设置默认值或错误提示
                    console.error('文件上传返回的 URL 无效');
                    url = ''; // 可以根据需求设置默认值或处理逻辑
                }    
               
                return JSON.stringify({
                    code: 0,
                    data: { errFiles: [], succMap: { [name]: url } },
                    msg: '22'
                });

            },
            error() {                                                             // 文件上传失败处理
                ElMessage.error("文件上传异常")
            },
            linkToImgUrl: baseURL + '/minio/upload',  // 确保是正确的图片上传接口
            linkToImgFormat: (responseText: any) => {
                return responseText.data;  // 直接返回图片 URL 
            }

        },
    })
})


// 监听 userForm.content 的变化，手动更新编辑器内容
watch(() => props.modelValue, (newContent) => {
    if (editor.value && newContent !== editor.value.getValue()) {
        editor.value.setValue(newContent);
    }
});
// 切换亮暗主题
/* watch(() => themeStore.isDarkTheme,(value) => {
  const editorValue = editor.value
  if (editor.value) {
    // 编译器主题
    editorValue.setTheme(
        value ? 'dark' : 'classic',
        value ? 'dark' : 'light',
        value ? 'solarized-dark256' : 'solarized-light'
    )
  }
}) */
</script>
